<template>
  <div>
    <h3>父级组件</h3>
    <p>
      允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。对于深层嵌套的组件关系，如果外层组件需要给深层组件之间，传递数据，可以使用提供与注入，注意：它是单向的。
    </p>
    <p>uname: {{ uname }}</p>
    <button @click="setUname">setUname</button>
    <hr />
    <one></one>
    <hr />
    <h1>vuex数据</h1>
    <p>{{ sname }} - {{ sage }}</p>
    <button @click="go">跳转</button>
  </div>
</template>

<script>
import One from "@/components/One.vue";
import { ref, provide, getCurrentInstance, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";

export default {
  name: "Vue3CourseProvideInject",
  components: {
    One,
  },

  setup() {
    const { $format, name } =
      getCurrentInstance().appContext.config.globalProperties; // 固定写法
    const uname = ref("小王");
    const setUname = () => {
      uname.value = Date.now();
      console.log("----", $format("张", "小胖"), name);
    };

    // 向深层组件提供数据：响应式数据或非响应式都可。
    provide("uname", uname); // 提供数据
    provide("uage", 20); // 提供数据

    const store = useStore(); // 等价于 this.$store
    const route = useRoute();
    console.log(route.query); // this.$route.query

    const router = useRouter(); // this.$router.query
    const go = () => {
      router.push({
        name: "trigger",
        query: {
          a: 100,
        },
      });
    };
    return {
      uname,
      setUname,
      ...toRefs(store.state),
      go,
    };
  },
};
</script>
